<script setup>
defineOptions({
  name: 'payIndex'
})
import { useRoute } from 'vue-router'
import { getOrderDetail } from '@/api/order.js'
import { getPayCode } from '@/api/pay.js'
import zfb from '@/assets/img/zfb.png'
import weixin from '@/assets/img/weixin.png'
import { onMounted } from 'vue'
import { ref } from 'vue'

const route = useRoute()
onMounted(async () => (data.value = await getOrderDetail(route.params.id)))
const data = ref(false)

const pay = async () => {
  payAft.value = await getPayCode(route.params.id, route.params.type)
  Object.keys(payAft.value).length
    ? (showSuc.value = true)
    : (showFail.value = true)
}
const payAft = ref(false)

const showSuc = ref(false)

const showFail = ref(false)
</script>

<template>
  <div class="bg-white vh-100">
    <ShopNavbar :title="'模拟支付'"></ShopNavbar>

    <div v-if="data.id" class="my-5">
      <img
        width="64"
        height="64"
        :src="route.params.type === 'aliyun' ? zfb : weixin"
        alt=""
        class="d-block mx-auto my-3"
      />
      <h5 class="text-center font-weight-lighter">支付金额</h5>
      <h4 class="text-center text-danger">￥{{ data.amount }}.00</h4>
    </div>

    <div class="px-5">
      <p class="d-flex justify-content-between align-items-center">
        <span>订单No.</span>
        <span class="text-secondary"></span>
      </p>
      <hr />
      <div class="d-flex justify-content-between align-items-center">
        <span>收款方</span>
        <span class="text-secondary">图书兄弟</span>
      </div>
      <p class="text-secondary w-75 my-3" style="font-size: 12px">
        模拟支付，改变支付状态，完成购物流程，请放心付款。
      </p>
    </div>
    <van-button type="primary" @click="pay" block class="w-75 mx-auto"
      >立即支付</van-button
    >
  </div>
  <van-popup v-model:show="showSuc" round :style="{ padding: '64px' }">
    <template #default>
      <div>
        <p class="text-secondary" align="center">
          支付成功，订单编号为{{ payAft.out_trade_no }},已支付{{
            payAft.total_amount
          }}，购买了{{ payAft.body }}
        </p>
        <van-button
          plain
          hairline
          block
          @click="$router.replace(`/orderDetail/${route.params.id}`)"
          ><span class="text-danger">确认</span></van-button
        >
      </div>
    </template>
  </van-popup>

  <van-popup v-model:show="showFail" round :style="{ padding: '64px' }">
    <template #default> 支付失败，出错 </template>
  </van-popup>
</template>

<style lang="scss" scoped></style>
